{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "b92ae419",
   "metadata": {},
   "source": [
    "## Dot Map"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "b4fcd0c5",
   "metadata": {},
   "outputs": [],
   "source": [
    "data = [\n",
    "    {\n",
    "        \"lng\": 105.005,\n",
    "        \"lat\": 32.349,\n",
    "        \"depth\": 10,\n",
    "        \"mag\": 5.2,\n",
    "        \"time\": 1212640865530,\n",
    "        \"title\": \"M 5.2 - Sichuan-Gansu border region, China\"\n",
    "    },\n",
    "    {\n",
    "        \"lng\": 104.602,\n",
    "        \"lat\": 32.067,\n",
    "        \"depth\": 10,\n",
    "        \"mag\": 5,\n",
    "        \"time\": 1212462569360,\n",
    "        \"title\": \"M 5.0 - Sichuan-Gansu border region, China\"\n",
    "    },\n",
    "    {\n",
    "        \"lng\": 105.272,\n",
    "        \"lat\": 32.451,\n",
    "        \"depth\": 10,\n",
    "        \"mag\": 5.2,\n",
    "        \"time\": 1211177214760,\n",
    "        \"title\": \"M 5.2 - Sichuan-Gansu border region, China\"\n",
    "    },\n",
    "    {\n",
    "        \"lng\": 105.042,\n",
    "        \"lat\": 32.402,\n",
    "        \"depth\": 10,\n",
    "        \"mag\": 5,\n",
    "        \"time\": 1211170138690,\n",
    "        \"title\": \"M 5.0 - Sichuan-Gansu border region, China\"\n",
    "    },\n",
    "    {\n",
    "        \"lng\": 104.982,\n",
    "        \"lat\": 32.24,\n",
    "        \"depth\": 9,\n",
    "        \"mag\": 5.8,\n",
    "        \"time\": 1211044105480,\n",
    "        \"title\": \"M 5.8 - Sichuan-Gansu border region, China\"\n",
    "    },\n",
    "    {\n",
    "        \"lng\": 103.665,\n",
    "        \"lat\": 31.29,\n",
    "        \"depth\": 10,\n",
    "        \"mag\": 5,\n",
    "        \"time\": 1210969012190,\n",
    "        \"title\": \"M 5.0 - eastern Sichuan, China\"\n",
    "    },\n",
    "    {\n",
    "        \"lng\": 103.351,\n",
    "        \"lat\": 31.355,\n",
    "        \"depth\": 3,\n",
    "        \"mag\": 5.6,\n",
    "        \"time\": 1210915547320,\n",
    "        \"title\": \"M 5.6 - eastern Sichuan, China\"\n",
    "    },\n",
    "    {\n",
    "        \"lng\": 104.214,\n",
    "        \"lat\": 31.66,\n",
    "        \"depth\": 10,\n",
    "        \"mag\": 5.1,\n",
    "        \"time\": 1210798867000,\n",
    "        \"title\": \"M 5.1 - eastern Sichuan, China\"\n",
    "    },\n",
    "    {\n",
    "        \"lng\": 104.014,\n",
    "        \"lat\": 31.356,\n",
    "        \"depth\": 10,\n",
    "        \"mag\": 5.1,\n",
    "        \"time\": 1210757203950,\n",
    "        \"title\": \"M 5.1 - eastern Sichuan, China\"\n",
    "    },\n",
    "    {\n",
    "        \"lng\": 104.032,\n",
    "        \"lat\": 31.996,\n",
    "        \"depth\": 10,\n",
    "        \"mag\": 5.1,\n",
    "        \"time\": 1210744497980,\n",
    "        \"title\": \"M 5.1 - eastern Sichuan, China\"\n",
    "    },\n",
    "    {\n",
    "        \"lng\": 103.518,\n",
    "        \"lat\": 31.325,\n",
    "        \"depth\": 18.8,\n",
    "        \"mag\": 5.4,\n",
    "        \"time\": 1210733679980,\n",
    "        \"title\": \"M 5.4 - eastern Sichuan, China\"\n",
    "    },\n",
    "    {\n",
    "        \"lng\": 105.275,\n",
    "        \"lat\": 32.416,\n",
    "        \"depth\": 10,\n",
    "        \"mag\": 5,\n",
    "        \"time\": 1210663156260,\n",
    "        \"title\": \"M 5.0 - Sichuan-Gansu border region, China\"\n",
    "    },\n",
    "    {\n",
    "        \"lng\": 103.194,\n",
    "        \"lat\": 30.89,\n",
    "        \"depth\": 9,\n",
    "        \"mag\": 5.8,\n",
    "        \"time\": 1210662428500,\n",
    "        \"title\": \"M 5.8 - eastern Sichuan, China\"\n",
    "    },\n",
    "]"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "id": "correct-vertex",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<!DOCTYPE html>\n",
       "<html>\n",
       "  <head>\n",
       "    <meta charset=\"UTF-8\" />\n",
       "    <title>PyL7Plot</title>\n",
       "  </head>\n",
       "  <body>\n",
       "    <style>\n",
       "      * {\n",
       "        margin: 0;\n",
       "        padding: 0;\n",
       "        box-sizing: border-box;\n",
       "      }\n",
       "      html,\n",
       "      body,\n",
       "      div.pyl7plot-plot-container {\n",
       "        height: 100%;\n",
       "        overflow: hidden;\n",
       "      }\n",
       "    </style>\n",
       "\n",
       "    <div id=\"92e63948487443b090d24bf22c28784b\" class=\"pyl7plot-plot-container\"></div>\n",
       "\n",
       "    <script>\n",
       "      // load javascript\n",
       "      new Promise(function(resolve, reject) {\n",
       "        var script = document.createElement(\"script\");\n",
       "        script.onload = resolve;\n",
       "        script.onerror = reject;\n",
       "        script.src = \"https://unpkg.com/@antv/l7plot@0\";\n",
       "        document.head.appendChild(script);\n",
       "      }).then(() => {\n",
       "        var plot_92e63948487443b090d24bf22c28784b = new L7Plot.Dot(\"92e63948487443b090d24bf22c28784b\", {\n",
       "  \"map\": {\n",
       "    \"type\": \"mapbox\",\n",
       "    \"style\": \"light\",\n",
       "    \"center\": [\n",
       "      103.447303,\n",
       "      31.753574\n",
       "    ],\n",
       "    \"zoom\": 7\n",
       "  },\n",
       "  \"height\": 400,\n",
       "  \"autoFit\": true,\n",
       "  \"source\": {\n",
       "    \"data\": [\n",
       "      {\n",
       "        \"lng\": 105.005,\n",
       "        \"lat\": 32.349,\n",
       "        \"depth\": 10,\n",
       "        \"mag\": 5.2,\n",
       "        \"time\": 1212640865530,\n",
       "        \"title\": \"M 5.2 - Sichuan-Gansu border region, China\"\n",
       "      },\n",
       "      {\n",
       "        \"lng\": 104.602,\n",
       "        \"lat\": 32.067,\n",
       "        \"depth\": 10,\n",
       "        \"mag\": 5,\n",
       "        \"time\": 1212462569360,\n",
       "        \"title\": \"M 5.0 - Sichuan-Gansu border region, China\"\n",
       "      },\n",
       "      {\n",
       "        \"lng\": 105.272,\n",
       "        \"lat\": 32.451,\n",
       "        \"depth\": 10,\n",
       "        \"mag\": 5.2,\n",
       "        \"time\": 1211177214760,\n",
       "        \"title\": \"M 5.2 - Sichuan-Gansu border region, China\"\n",
       "      },\n",
       "      {\n",
       "        \"lng\": 105.042,\n",
       "        \"lat\": 32.402,\n",
       "        \"depth\": 10,\n",
       "        \"mag\": 5,\n",
       "        \"time\": 1211170138690,\n",
       "        \"title\": \"M 5.0 - Sichuan-Gansu border region, China\"\n",
       "      },\n",
       "      {\n",
       "        \"lng\": 104.982,\n",
       "        \"lat\": 32.24,\n",
       "        \"depth\": 9,\n",
       "        \"mag\": 5.8,\n",
       "        \"time\": 1211044105480,\n",
       "        \"title\": \"M 5.8 - Sichuan-Gansu border region, China\"\n",
       "      },\n",
       "      {\n",
       "        \"lng\": 103.665,\n",
       "        \"lat\": 31.29,\n",
       "        \"depth\": 10,\n",
       "        \"mag\": 5,\n",
       "        \"time\": 1210969012190,\n",
       "        \"title\": \"M 5.0 - eastern Sichuan, China\"\n",
       "      },\n",
       "      {\n",
       "        \"lng\": 103.351,\n",
       "        \"lat\": 31.355,\n",
       "        \"depth\": 3,\n",
       "        \"mag\": 5.6,\n",
       "        \"time\": 1210915547320,\n",
       "        \"title\": \"M 5.6 - eastern Sichuan, China\"\n",
       "      },\n",
       "      {\n",
       "        \"lng\": 104.214,\n",
       "        \"lat\": 31.66,\n",
       "        \"depth\": 10,\n",
       "        \"mag\": 5.1,\n",
       "        \"time\": 1210798867000,\n",
       "        \"title\": \"M 5.1 - eastern Sichuan, China\"\n",
       "      },\n",
       "      {\n",
       "        \"lng\": 104.014,\n",
       "        \"lat\": 31.356,\n",
       "        \"depth\": 10,\n",
       "        \"mag\": 5.1,\n",
       "        \"time\": 1210757203950,\n",
       "        \"title\": \"M 5.1 - eastern Sichuan, China\"\n",
       "      },\n",
       "      {\n",
       "        \"lng\": 104.032,\n",
       "        \"lat\": 31.996,\n",
       "        \"depth\": 10,\n",
       "        \"mag\": 5.1,\n",
       "        \"time\": 1210744497980,\n",
       "        \"title\": \"M 5.1 - eastern Sichuan, China\"\n",
       "      },\n",
       "      {\n",
       "        \"lng\": 103.518,\n",
       "        \"lat\": 31.325,\n",
       "        \"depth\": 18.8,\n",
       "        \"mag\": 5.4,\n",
       "        \"time\": 1210733679980,\n",
       "        \"title\": \"M 5.4 - eastern Sichuan, China\"\n",
       "      },\n",
       "      {\n",
       "        \"lng\": 105.275,\n",
       "        \"lat\": 32.416,\n",
       "        \"depth\": 10,\n",
       "        \"mag\": 5,\n",
       "        \"time\": 1210663156260,\n",
       "        \"title\": \"M 5.0 - Sichuan-Gansu border region, China\"\n",
       "      },\n",
       "      {\n",
       "        \"lng\": 103.194,\n",
       "        \"lat\": 30.89,\n",
       "        \"depth\": 9,\n",
       "        \"mag\": 5.8,\n",
       "        \"time\": 1210662428500,\n",
       "        \"title\": \"M 5.8 - eastern Sichuan, China\"\n",
       "      }\n",
       "    ],\n",
       "    \"parser\": {\n",
       "      \"type\": \"json\",\n",
       "      \"x\": \"lng\",\n",
       "      \"y\": \"lat\"\n",
       "    }\n",
       "  },\n",
       "  \"color\": {\n",
       "    \"field\": \"mag\",\n",
       "    \"value\": [\n",
       "      \"#82cf9c\",\n",
       "      \"#10b3b0\",\n",
       "      \"#2033ab\"\n",
       "    ],\n",
       "    \"scale\": {\n",
       "      \"type\": \"quantize\"\n",
       "    }\n",
       "  },\n",
       "  \"size\": {\n",
       "    \"field\": \"mag\",\n",
       "    \"value\": function({ mag }) {        return (mag - 4.3) * 10;      }\n",
       "  },\n",
       "  \"state\": {\n",
       "    \"active\": true\n",
       "  },\n",
       "  \"scale\": {\n",
       "    \"position\": \"bottomright\"\n",
       "  },\n",
       "  \"legend\": {\n",
       "    \"position\": \"bottomleft\"\n",
       "  },\n",
       "  \"tooltip\": {\n",
       "    \"items\": [\n",
       "      \"title\",\n",
       "      \"mag\",\n",
       "      \"depth\"\n",
       "    ]\n",
       "  }\n",
       "});\n",
       "      });\n",
       "    </script>\n",
       "  </body>\n",
       "</html>\n"
      ],
      "text/plain": [
       "<pyl7plot.helper.html.HTML at 0x7fa562d93630>"
      ]
     },
     "execution_count": 9,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from pyl7plot import Plot, JS\n",
    "dotMap = Plot(\"Dot\")\n",
    "\n",
    "dotMap.set_options({\n",
    "  \"map\": {\n",
    "    \"type\": \"mapbox\",\n",
    "    \"style\": \"light\",\n",
    "    \"center\": [103.447303, 31.753574],\n",
    "    \"zoom\": 7,\n",
    "  },\n",
    "  \"height\": 400, # set a default height in jupyter preview\n",
    "  \"autoFit\": True,\n",
    "  \"source\": {\n",
    "    \"data\": data,\n",
    "    \"parser\": { \"type\": \"json\", \"x\": \"lng\", \"y\": \"lat\" },\n",
    "  },\n",
    "  \"color\": {\n",
    "    \"field\": \"mag\",\n",
    "    \"value\": [\"#82cf9c\", \"#10b3b0\", \"#2033ab\"],\n",
    "    \"scale\": { \"type\": \"quantize\" },\n",
    "  },\n",
    "  \"size\": {\n",
    "    \"field\": \"mag\",\n",
    "    # Use JS API, you can use JavaScript syntax for callback.\n",
    "    \"value\": JS('''function({ mag }) {\n",
    "        return (mag - 4.3) * 10;\n",
    "      }''')\n",
    "  },\n",
    "  \"state\": { \"active\": True },\n",
    "  \"scale\": { \"position\": \"bottomright\" },\n",
    "  \"legend\": { \"position\": \"bottomleft\" },\n",
    "  \"tooltip\": {\n",
    "    \"items\": [\"title\", \"mag\", \"depth\"],\n",
    "  },\n",
    "})\n",
    "\n",
    "dotMap.render_jupyter_lab()"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.6.13"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}
